<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="packtag" prefix="pack" %>
<c:set var="ctx" value="${pageContext.request.contextPath }"/>
<%--
  User: kent
  Date: 15/11/9
  Time: 上午11:47
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <pack:style>
        <src>/static/lol/css/ratchet.min.css</src>
        <src>/static/lol/css/style.css</src>
        <src>/static/sweetalert/sweetalert.css</src>
    </pack:style>

    <pack:script>
        <src>/static/wx/wx.js</src>
        <src>/static/jquery/jquery-1.9.1.min.js</src>
        <src>/static/sweetalert/sweetalert.min.js</src>
        <src>/static/lol/js/lol.js</src>
    </pack:script>

    <script>
        wx.config(${config});

        wx.ready(function () {
            wx.onMenuShareAppMessage({
                title: '我正在参加"双十一撸钱”活动', // 分享标题
                desc: '撸败了全国81%的对手，成功抢到111元现金红包获得”强撸灰飞烟灭“王者称号，你也来试试吧！', // 分享描述
                link: '${shareUrl}', // 分享链接
                imgUrl: '${shareImgUrl}', // 分享图标
                type: 'link', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
                    // 用户确认分享后执行的回调函数
                    afterShare();
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
            wx.onMenuShareTimeline({
                title: '我正在参加"双十一撸钱”活动', // 分享标题
                link: '${shareUrl}', // 分享链接
                imgUrl: '${shareImgUrl}', // 分享图标
                success: function () {
                    afterShare();// 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
            wx.hideMenuItems({
                menuList: ["menuItem:copyUrl"]
            });
        });
    </script>
    <title>积分上传</title>
</head>
<body style="background-color: #000000;">
<img src="<c:url value="/static/lol/img/share_head.jpg"/>"/>

<div class="share_random"><p style="color: white">已有${randomShareNum}位用户成功领取了红包</p></div>

<div class="share_form">
    <!--<form>-->
    <input type="text" id="mobile" name="mobile" placeholder="输入手机号"/>

    <div class="verification">
        <input type="text" name="verifyCode" placeholder="输入验证码" id="verifyCode"/>
        <button class="" id="verifyCodeBtn">获取验证码</button>
    </div>
    <button id="share" class="btn btn-block">确认</button>
    <!--</form>-->
</div>
<img src="<c:url value="/static/lol/img/share_footer.jpg"/>"/>
<!--分享弹窗-->
<div id="shareCover" class="share_wrapper">
    <img src="<c:url value="/static/lol/img/share_overlay.png"/>"/>
</div>
<!--遮罩层-->
<div class="overlay"></div>
<!--分享成功弹窗-->
<div id="shareSuccess" class="share_wrapper">
    <img style="width: 100%" src="<c:url value="/static/lol/img/share_success.png"/>"/>
</div>

<script>
    $(function () {
        $("#share").on("click", uploadScoreHandler);
        $("#verifyCodeBtn").on("click", verifyCodeHandler);

        //是否已参加
        isParticipate();
    });

    function alertMsg(msg) {
        swal({
            title:"提示",
            text: msg,
            animation: false,
            allowOutsideClick: true
        });
    }


    function isParticipate() {
        if (${isParticipate}) {
            $(".overlay").css("display", "block");
            $("#shareCover").css("display", "block");
        }
    }

    function uploadScoreHandler() {
        $.post('${ctx}/lol/participate',
                {openid: '${openid}', mobile: $("#mobile").val(), verifyCode: $("#verifyCode").val()},
                function (data) {
                    if (data.resultCode == 1000) {
                        $(".overlay").css("display", "block");
                        $("#shareCover").css("display", "block");
                    } else {
                        alertMsg(data.resultMsg);
                    }
                });
    }

    function afterShare() {
        $.post('${ctx}/lol/afterShare',
                {openid: '${openid}'},
                function (data) {
                    if (data.resultCode == 1000) {
                        $("#shareCover").css("display", "none");
                        $("#shareSuccess").css("display", "block");
                    } else {
                        alertMsg(data.resultMsg);
                    }
                });
    }

    function verifyCodeHandler() {

        $.post('${ctx}/lol/sendVerifyCode',
                {mobile: $("#mobile").val()},
                function (data) {
                    if (data.resultCode != 1000) {
                        alertMsg(data.resultMsg);
                    }
                });

        var count = 60;
        $("#verifyCodeBtn").attr("disabled", true);

        time();
        function time() {
            if (count == 0) {
                $("#verifyCodeBtn")
                        .text("重新获取")
                        .removeAttr("disabled");
            } else {
                $("#verifyCodeBtn")
                        .text(count + "s后获取");
                count--;
                setTimeout(time, 1000);
            }
        }
    }
</script>
</body>
</html>
